<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<title></title>
		<style>
			#box1{
				width: 200px;
				height: 200px;
				background: mediumpurple;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 50px;
				color: #fff;
			}
		</style>
		<!--<script>
			(function(){
				var html = document.documentElement;
				var hWidth = html.getBoundingClientRect().width;
				html.style.fontsize = hWidth/15+'px';
			})()
		</script>-->
	</head>
	<body>
		<div id="box1"></div>
	<script>
		/*
			当给某个元素加上了事件绑定函数之后，事件函数默认的第一个参数就是事件对象
			
			事件对象：
				当用户在浏览器下触发了某个行为，事件对象会记录用户操作时的一些细节信息
				
			touches 当前位于*屏幕*上所有手指的一个列表
			
			targetTouches 位于当前DOM元素上的手指的一个列表 
			
			changedTouches	涉及当前事件的手指的一个列表
		*/
		document.addEventListener('touchstart',function(ev){
			ev.preventDefault()
		});
		var box1 = document.getElementById("box1");
		box1.addEventListener('touchmove',start);
		function start(ev){
//			this.innerHTML = ev.touches.length;
//			this.innerHTML = ev.targetTouches.length;
			this.innerHTML = ev.changedTouches.length;
		}
	</script>
	</body>
	
</html>
